
* {
    margin: 0px;
    padding: 0px;
}

#block {
    background-color: rgba(255, 0, 255, 0.459);
}

#block h2 {
    background-color: rgb(172, 129, 212);
    display: inline;
}

/* 剩下block元素自己实验 */

#inline a {
    background-color: rgb(214, 210, 210);
}

#inline-block img {
    background-color: green;
    width: 300px;
    height: 150px;
    /* display: block; */
    /* display: inline;  /* 改成inline后，与width、height冲突 */
}

/* 浮动 */
#float div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    /* float: none left right */
    float: right;
}

#float hr {
    clear: both;
}

#layer {
    position: relative;
    border: 1px solid black;
}

#layer div{
    width: 200px;
    height: 200px;
    border: 1px solid green;
}

#layer #box1 {
    position: fixed;
    top: 200px;
    left: 200px;
}

#layer #box2 {
    /* 原位置依然存在，相对于其原位置进行重定位 */
    position: relative;
    top: 20px;
    left: 20px;
}

#layer #box3 {
    position: absolute;
    top: 0px;
    left: 500px;
}